<template>
	<view class="goodsEvaluation">
		<n-loading></n-loading>
		<!-- tab -->
		<!-- <view class="eLabelBox">
			<view class="labelItem" v-for="(item,index) in tabVal" :key="index" @tap="labelTab(index)" :class="{labelItemEd:tabIndex == index}">{{item.title}}({{item.num}})</view>
		</view> -->
		<!-- 评论列表 -->
		<view class="evaluate" v-if="evaluateListReady">
			<view class="nodata" v-if="evaluateList.length==0">
				<image src="../../static/svgIcon/noCoupon.svg" mode=""></image>
				<view class="tips">暂无评论~</view>
			</view>
			<view class="evaluateList" v-for="(item,index) of evaluateList" :key="index">
				<view class="evaluateTop">
					<dh-image class="niccImg" :src="item.userInfo.avatar==null?'../../static/img/vector.svg':item.userInfo.avatar" errorSrc="../../static/img/vector.svg"></dh-image>
					<text class="nickName">{{item.userInfo.nickname==null?'暂无':item.userInfo.nickname}}</text>
					<u-rate v-model="scoreArr[index]" active-color="#EB4B34" gutter="6" size="22" :disabled="true"></u-rate>
					<view class="eTime">{{getdate(item.created_at,0)}}</view>
				</view>
				<view class="eCont">{{item.content}}</view>
				<scroll-view scroll-x="true" class="eImage">
					<view class="imgBox" v-for="(img,i) of item.imageItems" :key="i" @tap="seeImg(i,item.imageItems)">
						<dh-image class="niccImg" :src="img.file_url" errorSrc="../../static/svgIcon/noCoupon.svg"></dh-image>
					</view>
				</scroll-view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsId:null,
				evaluateList:[],
				evaluateListReady:null,
				scoreArr:[],
				isLoadMore:false,
				page: 1,
				pageSize: 10,
			}
		},
		onLoad: function (option) {
			this.goodsId = option.id;
			this.getEvaluateList();
		},
		// 滑动到底部
		onReachBottom() {
			if(!this.isLoadMore){
				this.getEvaluateList()
			}
		},
		methods:{
			// 获取商品评价
			getEvaluateList(id){
				var _this = this;
				this.apiget('/fun/goods/comment',{goods_id:this.goodsId,page:this.page,pageSize:this.pageSize}).then(res =>{
					if(res.data.status == 200 ) {
						var list = res.data.data.list;
						var eList = list.filter(v => {
							return v.status == 1;
						});
						_this.evaluateList = _this.evaluateList.concat(eList);
						_this.evaluateListReady = 1;
						_this.evaluateList.forEach((v,i) => {
							_this.scoreArr.push(v.score);
						})
						if(res.data.data.list.length<this.pageSize){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else if(res.data.data.list.length==this.pageSize && this.page == res.data.data.pageCount){
							this.isLoadMore = true;
							this.status = 'nomore';
						}else{
							this.status = 'loading';
							this.page = ++ this.page;
						}
					}
				})
			},
			// 预览图片
			seeImg(index,imageItems){
				var imgUrls = [];
				imageItems.forEach((v,i) => {
					imgUrls.push(v.file_url);
				});
				// 预览图片
				uni.previewImage({
					current:index,
					urls: imgUrls
				});
			},
			// 分类
			labelTab(index){
				this.tabIndex = index;
			}
		}
	}
</script>

<style lang="scss">
	.goodsEvaluation{
		min-height: 100%;
		background: #F8F8FA;
	}
	.eLabelBox{
		padding: 16rpx 40rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
		
		.labelItem{
			display: inline-block;
			padding: 6rpx 40rpx;
			margin: 8rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #666666;
			border: 2rpx solid #999999;
			border-radius: 28rpx;
		}
		
		.labelItemEd{
			background: #FEF1EF;
			color: #EB4B34;
			border: 2rpx solid #EB4B34;
		}
	}
	
	.evaluate{
		min-height: 100vh;
		padding: 0 32rpx 32rpx;
		background-color: #fff;
	}
	.evaluateTop{
		display: flex;
		align-items: center;
		padding: 16rpx 0;
		font-size: 24rpx;
		
		image{
			width: 64rpx;
			height: 64rpx;
			margin-right: 8rpx;
			border-radius: 50%;
		}
		.nickName{
			margin-right: 17rpx;
			color: #333;
		}
		.eTime{
			flex: auto;
			text-align: right;
			color: rgba(0, 0, 0, 0.56);
		}
	}
	.eCont{
		padding: 8rpx 0;
		font-size: 24rpx;
		line-height: 36rpx;
		color: #333333;
	}
	.eImage{
		// width: calc(100%);
		// height: 160rpx;
		padding-bottom: 32rpx;
		display: flex;
		align-items: center;
		white-space: nowrap;
		box-shadow: inset 0px -0.5px 0px #ECEEF0;
		
		.imgBox{
			display: inline-block;
			width: 160rpx;
			height: 100%;
			border-radius: 8rpx;
			margin-right: 8rpx;
			
			.niccImg{
				display: inline-block;
				width: 100%;
				height: 100%;
				border-radius: 8rpx;
			}
		}
	}
</style>
